<script setup lang="ts">
import {ref, onMounted, watch} from "vue";
import { alarmNum } from "@/api";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";
import {cloneDeep} from "lodash-es";

const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})
const option = ref({});

const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
  option.value = {
    xAxis: [{
      type: "category",
      data: xData,
      splitLine: {
        show: false,
      },
      axisLine: {
        show:true,
        lineStyle: {
          color: "rgba(251, 45, 25, 1)",
        },
      },
      axisLabel: {
        color: "#fff",
        fontWeight: "500",
      },
      axisTick:{
        show:false
      },
    }],
    yAxis: [
      {
        name: '人数',
        type: "value",
        nameTextStyle: {
          color: "#fff"
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: "rgba(255, 255, 255, .2)",
          },
        },
        axisLine: {
          show:false,
        },
        axisTick:{
          show:false
        },
        axisLabel: {
          show:true,
          color: "#fff",
          fontWeight: "500",
        },
      },
      {
        name: '金额',
        type: "value",
        nameTextStyle: {
          color: "#fff"
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: "rgba(255, 255, 255, .2)",
          },
        },
        axisTick:{
          show:false
        },
        axisLine: {
          show:false,
        },
        axisLabel: {
          show:true,
          color: "#fff",
          fontWeight: "500",
        },
      }
    ],
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    grid: {
      //布局
      show: false,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "50px",
      containLabel: true,
    },
    legend: {
      top:'18',
      right: '140',
      itemGap: 20,
      textStyle:{
        color:'#fff'
      }
    },
    series: [
      {
        data: yData,
        type: "line",
        smooth: true,
        symbol: "none", //去除点
        name: "进入直播间人数",
        color: "rgba(254, 81, 95, 1)",
        areaStyle: {
          //右，下，左，上
          color: new graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(254, 81, 95, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(252,144,16,.0)",
                },
              ],
              false
          ),
        },
      },
      {
        data: yData2,
        yAxisIndex:1,
        type: "line",
        smooth: true,
        symbol: "none", //去除点
        name: "直播间成交金额数",
        color: "rgba(9, 205, 213, 1)",
        areaStyle: {
          //右，下，左，上
          color: new graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(9, 205, 213, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(9,202,243,0)",
                },
              ],
              false
          ),
        },
      },
    ],
  };
};

watch(()=>props.data, (newval:any)=>{
  if(newval.length){
    const val = cloneDeep(newval)
    val?.reverse();
    setOption(val?.map((v:any)=>v.x),val?.map(v=>v.person_now),val?.map(v=>v.inc))
  }
},{
  deep:true,
  immediate:true
})
</script>

<template>
  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
</template>

<style scoped lang="scss">
.chart{
  width: 100%;
  height: 404px;
}
</style>
